<template>
	<view class="wpprs">
		<view class="topbox">
			<view class="ctnbox">
				<image :src="aveurl" mode=""></image>
				<view class="ctns">
					<view>品牌：{{ productNames[2] }}</view>
					<view>类别：{{ productNames[3] }}</view>
					<view>名称：{{ productNames[0] }}</view>
					<view>SN：{{ productNames[1] }}</view>
				</view>
			</view>
			<view class="timer">
				维保终止：
				<uni-dateformat :date="productDetail.warrantyEndDate"></uni-dateformat>
			</view>
		</view>
		<view class="infos">
			<view class="title">{{ isTypeList[workOrderDetail.type] }}信息</view>
			<view class="infolist">
				<view class="label">公司:</view>
				<view class="names">{{ workOrderDetail.workOrderPetitionDTO.companyName }}</view>
			</view>
			<view class="infolist">
				<view class="label">名称:</view>
				<view class="names">{{ workOrderDetail.workOrderPetitionDTO.contact }}</view>
			</view>
			<view class="infolist">
				<view class="label">联系方式:</view>
				<view class="names">{{ workOrderDetail.workOrderPetitionDTO.phone }}</view>
			</view>
			<view class="infolist">
				<view class="label">地址:</view>
				<view class="names">{{ workOrderDetail.workOrderPetitionDTO.regionNames }}{{ workOrderDetail.workOrderPetitionDTO.address }}</view>
			</view>
			<view class="infolist">
				<view class="label">期望上门日期:</view>
				<view class="names"><uni-dateformat :date="workOrderDetail.expectDate" format="yyyy/MM/dd"></uni-dateformat></view>
			</view>
			<view class="infolist">
				<view class="label">期望上门时段:</view>
				<view class="names">
					<uni-dateformat :date="workOrderDetail.expectStartTime"></uni-dateformat>
					-
					<uni-dateformat :date="workOrderDetail.expectEndTime"></uni-dateformat>
				</view>
			</view>
		</view>
		<view class="explain">
			<view class="title">{{ isTypeList[workOrderDetail.type] }}说明</view>
			<view class="ctn">{{ workOrderDetail.workOrderPetitionDTO.remark }}</view>
			<view class="imgbox"><image v-for="(item, idx) in imageList" :src="item" :key="idx" @click="toImg(item)"></image></view>
		</view>
		<view class="infos">
			<view class="title">订单信息</view>
			<view class="infolist">
				<view class="label">订单编号:</view>
				<view class="names">{{ workOrderDetail.orderNumber }}</view>
			</view>
			<view class="infolist" v-if="workOrderDetail.createTime">
				<view class="label">申请时间:</view>
				<view class="names"><uni-dateformat :date="workOrderDetail.createTime"></uni-dateformat></view>
			</view>
			<view class="infolist" v-if="workOrderDetail.sendTime">
				<view class="label">分配时间:</view>
				<view class="names"><uni-dateformat :date="workOrderDetail.sendTime"></uni-dateformat></view>
			</view>
			<view class="infolist" v-if="workOrderDetail.acceptTime">
				<view class="label">接单时间:</view>
				<view class="names"><uni-dateformat :date="workOrderDetail.acceptTime"></uni-dateformat></view>
			</view>
		</view>
		<view class="lins" v-if="result">
			<view v-for="item in workOrderDetail.workOrderLogList">
				<view class="title">
					<image src="../../static/duigou.png"></image>
					<view>{{ typeList[item.type] }}</view>
				</view>
				<view class="ctn">{{ item.engineerContent.split('~~')[0] }}</view>
				<view class="timer">{{ item.engineerContent.split('~~')[1] }}</view>
				<view class="btns" v-if="item.type == 6" @click="servicereport(item.workOrderReportId)">查看Service Report</view>
			</view>
		</view>
		<view class="infos">
			<view class="title">续保信息</view>
			<view class="infolist">
				<view class="label">是否续保:</view>
				<view class="names">{{ workOrderDetail.workOrderPetitionDTO.isRenewal ? '是' : '否' }}</view>
			</view>
		</view>
		<seeimg class="mychild" ref="mychild" />
		<view class="botbox" v-if="workOrderDetail.status == 2">
			<view class="l" @click="setorder">拒绝</view>
			<view class="r" @click="workOrderAccept">接单</view>
		</view>

		<view class="digbox" v-if="flag">
			<view class="digctn">
				<view class="title">拒绝理由</view>
				<input type="text" v-model="titles" placeholder="请输入拒绝理由" />
				<view class="dbtnbox">
					<view class="l" @click="flag = false">取消</view>
					<view @click="commit">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { productDetail, workOrderAccept, workOrderDetail, workOrderreject, detailByRecordId } from '../../api/order';
import seeimg from '@/components/xw-seeimg/index';
export default {
	components: { seeimg },
	name: 'orderdetails',
	data() {
		return {
			productNames: [],
			imageList: [],
			aveurl: '',
			productDetail: {},
			workOrderDetail: {},
			orderid: '',
			titles: '',
			result: null,
			flag: false,
			typeList: ['', '订单已提交', '订单已派单', '工程师拒单', '电话处理', '已打卡', '已上门处理', '已取消'],
			isTypeList: ['', '安装', '维修', '巡检', '', '校验', '验证', '培训', '移机']
		};
	},
	methods: {
		servicereport(val) {
			uni.navigateTo({
				url: `/pages/servicereport/servicereport?id=${val}`
			});
		},
		commit() {
			workOrderreject({
				id: this.orderid,
				titles: this.titles
			}).then((data) => {
				this.flag = false;
				uni.navigateBack({ delta: 1 });
			});
		},
		setorder() {
			this.titles = '';
			this.flag = true;
		},
		workOrderAccept() {
			workOrderAccept(this.orderid).then((data) => {
				uni.showToast({
					title: '接单成功',
					duration: 2000
				});
				uni.navigateBack({ delta: 1 });
			});
		},
		toImg(val) {
			this.$refs.mychild.onImg(val);
		}
	},
	onLoad(e) {
		this.aveurl = e.url;

		productDetail(e.id).then((data) => {
			this.productDetail = data.content;
			console.log('productDetail', data.content);
		});
		if (e.orderid) {
			this.orderid = e.orderid;
			if (e.result) {
				this.result = e.result;
				detailByRecordId({ recordId: e.orderid }).then((data) => {
					this.workOrderDetail = data.content;
					this.workOrderDetail.workOrderLogList = this.workOrderDetail.workOrderLogList.reverse();
					if (this.workOrderDetail.workOrderPetitionDTO.images) {
						this.imageList = this.workOrderDetail.workOrderPetitionDTO.images.split(',');
					}
					this.productNames = this.workOrderDetail.productNames.split(',');
					console.log('workOrderDetail', data.content);
				});
			} else {
				workOrderDetail(e.orderid).then((data) => {
					this.workOrderDetail = data.content;
					if (this.workOrderDetail.workOrderPetitionDTO.images) {
						this.imageList = this.workOrderDetail.workOrderPetitionDTO.images.split(',');
					}
					this.productNames = this.workOrderDetail.productNames.split(',');
					console.log('workOrderDetail', data.content);
				});
			}
		}
	}
};
</script>

<style lang="less" scoped>
.wpprs {
	height: 100%;
	width: 100%;
	background-image: url('https://junminyiqi.oss-cn-shanghai.aliyuncs.com/flies/d29eccf2-f7be-dbc8-4853-e3b19055825b.png');
	background-size: 100%;
	background-repeat: no-repeat;
	padding: 30upx 30upx 160upx 30upx;
	box-sizing: border-box;
	background-color: #f1f1f1;
}

.digbox {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	box-sizing: border-box;
	padding: 300upx 30upx 0 30upx;
	.digctn {
		width: 100%;
		background-color: #fff;
		border-radius: 10upx;
		.title {
			text-align: center;
			padding-top: 30upx;
		}
		input {
			padding: 30upx;
		}
		.dbtnbox {
			color: red;
			text-align: center;
			padding: 20upx;
			view {
				width: 50%;
				display: inline-block;
			}
			.l {
				border-right: 1px #ccc solid;
				box-sizing: border-box;
			}
		}
	}
}

.botbox {
	background-color: #fff;
	border-radius: 10upx 10upx 0 0;
	padding: 20upx 30upx;
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	text-align: right;
	box-sizing: border-box;
	height: 130upx;
	view {
		padding: 4upx 20upx;
		border-radius: 30upx;
		font-size: 26upx;
		display: inline-block;
		margin-right: 30upx;
	}
	.l {
		background-color: #fff;
		border: 1px #ccc solid;
		box-sizing: border-box;
	}
	.r {
		background-color: red;
		color: #fff;
	}
}
.lins {
	background-color: #fff;
	border-radius: 20upx;
	padding: 30upx;
	margin-top: 30upx;
	line-height: 1;
	.title {
		display: flex;
		image {
			width: 40upx;
			height: 40upx;
		}
		view {
			padding-left: 30upx;
		}
	}
	.ctn,
	.timer,
	.btns {
		font-size: 26upx;
		padding: 10upx 10upx 10upx 50upx;
		border-left: 1px red solid;
		transform: translateX(20upx);
	}
	.btns {
		color: red;
		font-size: 22upx;
	}
}
.explain {
	background-color: #fff;
	border-radius: 20upx;
	padding: 30upx 30upx 10upx 30upx;
	margin-top: 30upx;
	.title {
		font-size: 32upx;
		font-weight: 500;
		border-left: 8upx red solid;
		padding-left: 20upx;
		margin-bottom: 30upx;
	}
	.ctn {
		font-size: 28upx;
	}
	.imgbox {
		padding: 20upx 0;
		image {
			width: 190upx;
			height: 190upx;
			margin-right: 20upx;
			background-color: #f1f1f1;
		}
	}
}
.infos {
	background-color: #fff;
	border-radius: 20upx;
	padding: 30upx 30upx 10upx 30upx;
	margin-top: 30upx;
	.title {
		font-size: 32upx;
		font-weight: 500;
		border-left: 8upx red solid;
		padding-left: 20upx;
		margin-bottom: 30upx;
	}
	.infolist {
		display: flex;
		padding: 15upx 0;
		font-size: 28upx;
		.label {
			width: 100%;
		}
		.names {
			width: 100%;
			text-align: right;
		}
	}
}
.topbox {
	background-color: #fff;
	border-radius: 20upx;
	padding: 0 30upx;
	.ctnbox {
		display: flex;
		padding: 30upx 0;
		border-bottom: 1px #ccc solid;
		image {
			width: 200upx;
			height: 200upx;
		}
		.ctns {
			width: 100%;
			font-size: 24upx;
			padding-left: 30upx;
			padding-top: 4px;
			line-height: 1;
			view {
				padding-bottom: 20upx;
			}
		}
	}
	.timer {
		width: 100%;
		font-size: 26upx;
		padding: 30upx 0;
		line-height: 1;
	}
}
</style>
